﻿<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
        <meta name="author" content="Bdtask">
        <title>Bhulua - Bootstrap 4 Admin Template Deshboard</title>
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/dist/img/favicon.png">
        <!--Global Styles(used by all pages)-->
        <link href="http://cdn.bootstrapmb.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
        <link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
        <link href="assets/plugins/typicons/src/typicons.min.css" rel="stylesheet">
        <link href="assets/plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
        <!--Third party Styles(used by this page)--> 

        <!--Start Your Custom Style Now-->
        <link href="assets/dist/css/style.css" rel="stylesheet">
    </head>
    <body class="fixed">
        <!-- Page Loader -->
        <div class="page-loader-wrapper">
            <div class="loader">
                <div class="preloader">
                    <div class="spinner-layer pl-green">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
                <p>Please wait...</p>
            </div>
        </div>
        <!-- #END# Page Loader -->
        <div class="wrapper">
            <!-- Sidebar  -->
            <nav class="sidebar sidebar-bunker">
                <div class="sidebar-header">
                    <!--<a href="index.html" class="logo"><span>bd</span>task</a>-->
                    <a href="index.html" class="logo"><img src="assets/dist/img/logo.png" alt=""></a>
                </div><!--/.sidebar header-->
                <div class="profile-element d-flex align-items-center flex-shrink-0">
                    <div class="avatar online">
                        <img src="assets/dist/img/avatar-1.jpg" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="profile-text">
                        <h6 class="m-0">Naeem Khan</h6>
                        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284d50494558444d684f45494144064b4745">[email&#160;protected]</a></span>
                    </div>
                </div><!--/.profile element-->
                <form class="search sidebar-form" action="#" method="get" >
                    <div class="search__inner">
                        <input type="text" class="search__text" placeholder="Search...">
                        <i class="typcn typcn-zoom-outline search__helper" data-sa-action="search-close"></i>
                    </div>
                </form><!--/.search-->
                <div class="sidebar-body">
                    <nav class="sidebar-nav">
                        <ul class="metismenu">
                            <li class="nav-label">Main Menu</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-home-outline mr-2"></i>
                                    Dashboard
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="index.html">Default</a></li>
                                    <li><a href="dashboard_two.html">Dashboard Two</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-chart-pie-outline mr-2"></i>
                                    Charts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="charts_flot.html">Flot Chart</a></li>
                                    <li><a href="charts_Js.html">Chart js</a></li>
                                    <li><a href="charts_morris.html">Morris Charts</a></li>
                                    <li><a href="charts_sparkline.html">Sparkline Charts</a></li>
                                    <li><a href="charts_am.html">Am Charts</a></li>
                                    <li><a href="charts_apex.html">Chart Apex</a></li>
                                </ul>
                            </li>
                            <li><a href="chat.html"><i class="typcn typcn-messages mr-2"></i> Chat</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-mail mr-2"></i>
                                    Mailbox
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="mailbox.html">Mailbox</a></li>
                                    <li><a href="mailbox_details.html">Mailbox Details</a></li>
                                    <li><a href="compose.html">Compose</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-archive mr-2"></i>
                                    Tables
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="tables_bootstrap.html">Bootstrap tables</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Data tables</a>
                                        <ul class="nav-third-level">
                                            <li><a href="tables_data_basic.html">Basic initialization</a></li>
                                            <li><a href="tables_data_sources.html">Data sources</a></li>
                                            <li><a href="tables_data_api.html">API</a></li>
                                            <li><a href="tables_data_styling.html">Styling</a></li>
                                            <li><a href="tables_data_advanced.html">Advanced initialization</a></li>
                                            <li><a href="tables_data_bootstrap4.html">Bootstrap4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="tables_foo.html">FooTable</a></li>
                                    <li><a href="tables_jsgrid.html">Jsgrid table</a></li>
                                </ul>
                            </li>
                            <li class="mm-active">
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-clipboard mr-2"></i>
                                    Forms
                                </a>
                                <ul class="nav-second-level">
                                    <li class="mm-active"><a href="forms_basic.html">Basic Forms</a></li>
                                    <li><a href="forms_input_group.html">Input group</a></li>
                                    <li><a href="forms_mask.html">Form Mask</a></li>
                                    <li><a href="forms_touchspin.html">Touchspin</a></li>
                                    <li><a href="forms_select.html">Select</a></li>
                                    <li><a href="forms_cropper.html">Cropper</a></li>
                                    <li><a href="forms_file_upload.html">Forms File Upload</a></li>
                                    <li><a href="forms_editor_ck.html">CK Editor</a></li>
                                    <li><a href="forms_editor_summernote.html">Summernote</a></li>
                                    <li><a href="forms_wizard.html">Form Wizaed</a></li>
                                    <li><a href="forms_editor_markdown.html">Markdown</a></li>
                                    <li><a href="forms_editor_trumbowyg.html">Trumbowyg</a></li>
                                    <li><a href="forms_editor_wysihtml5.html">Wysihtml5</a></li>
                                </ul>
                            </li>
                            <li class="nav-label">Components</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-coffee mr-2"></i>
                                    UI Elements
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="ui_buttons.html">Buttons</a></li>
                                    <li><a href="ui_badges.html">Badges</a></li>
                                    <li><a href="ui_spinners.html">Spinners</a></li>
                                    <li><a href="ui_tabs.html">Tab</a></li>
                                    <li><a href="ui_notification.html">Notification</a></li>
                                    <li><a href="ui_tree_view.html">Tree View</a></li>
                                    <li><a href="ui_progressbars.html">Progressber</a></li>
                                    <li><a href="ui_list_view.html">List View</a></li>
                                    <li><a href="ui_ratings.html">Ratings</a></li>
                                    <li><a href="ui_datetime_picker.html">Date & Time Picker</a></li>
                                    <li><a href="ui_typography.html">Typography</a></li>
                                    <li><a href="ui_modals.html">Modals</a></li>
                                    <li><a href="ui_icheck_toggle_pagination.html">iCheck, Toggle, pagination</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-world-outline mr-2"></i>
                                    Maps
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="maps_amcharts.html">Amcharts Map</a></li>
                                    <li><a href="maps_gmaps.html">gMaps</a></li>
                                    <li><a href="maps_data.html">Data Maps</a></li>
                                    <li><a href="maps_jvector.html">Jvector Maps</a></li>
                                    <li><a href="maps_google.html">Google map</a></li>
                                    <li><a href="maps_snazzy.html">Snazzy Map</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-info-large-outline mr-2"></i>
                                    Icons
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="icons_bootstrap.html">Bootstrap Icons</a></li>
                                    <li><a href="icons_fontawesome.html">Fontawesome Icon</a></li>
                                    <li><a href="icons_flag.html">Flag Icons</a></li>
                                    <li><a href="icons_material.html">Material Icons</a></li>
                                    <li><a href="icons_weather.html">Weather Icons </a></li>
                                    <li><a href="icons_line.html">Line Icons</a></li>
                                    <li><a href="icons_pe.html">Pe Icons</a></li>
                                    <li><a href="icon_socicon.html">Socicon Icons</a></li>
                                    <li><a href="icons_typicons.html">Typicons Icons</a></li>
                                </ul>
                            </li>
                            <li><a href="widgets.html"><i class="typcn typcn-gift mr-2"></i>Widgets</a></li>
                            <li><a href="calender.html"><i class="typcn typcn-calendar-outline mr-2"></i>Calendar</a></li>
                            <li class="nav-label">Extra</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-device-tablet mr-2"></i>
                                    App Views
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="invoice.html">Invoice</a></li>
                                    <li><a href="invoice2.html">Invoice two</a></li>
                                    <li><a href="timeline_horizontal.html">Horizontal timeline</a></li>
                                    <li><a href="timeline_vertical.html">Vertical timeline</a></li>
                                    <li><a href="pricing.html">Pricing Table</a></li>
                                    <li><a href="range_slider.html">Range Slider</a></li>
                                    <li><a href="carousel.html">Carousel</a></li>
                                    <li><a href="code_editor.html">Code editor</a></li>
                                    <li><a href="gridSystem.html">Grid System</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-book mr-2"></i>
                                    Authentication
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="register.html">Register</a></li>
                                    <li><a href="user_profile.html">Profile</a></li>
                                    <li><a href="forget_password.html">Forget password</a></li>
                                    <li><a href="lockscreen.html">Lockscreen</a></li>
                                    <li><a href="404.html">404 Error</a></li>
                                    <li><a href="505.html">505 Error</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-flow-merge mr-2"></i>
                                    Multi Level Menu
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="#">Menu Item</a></li>
                                    <li><a href="#">Menu Item - 2</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Level - 2</a>
                                        <ul class="nav-third-level">
                                            <li><a href="#">Menu Item</a></li>
                                            <li>
                                                <a class="has-arrow" href="#" aria-expanded="false">Level - 3</a>
                                                <ul class="nav-fourth-level">
                                                    <li><a href="#">Level - 4</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="blank-page.html"><i class="typcn typcn-bookmark mr-2"></i>Blank page</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-puzzle-outline mr-2"></i>
                                    Layouts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="layouts_layout.html">Layout</a></li>
                                    <li><a href="layouts_fixed.html">Fixed layout</a></li>
                                    <li><a href="layouts_fixed-without__navbar.html">Fixed layout without navbar</a></li>
                                </ul>
                            </li>
                            <li><a href="changelog.html"><i class="typcn typcn-attachment-outline mr-2"></i>Changelog<span class="badge badge-success ml-auto">v1.1.0</span></a></li>
                            <li><a href="#"><i class="typcn typcn-support mr-2"></i>Documentation</a></li>
                        </ul>
                    </nav>
                </div><!-- sidebar-body -->
            </nav>
            <!-- Page Content  -->
            <div class="content-wrapper">
                <div class="main-content">
                    <nav class="navbar-custom-menu navbar navbar-expand-lg m-0">
                        <div class="sidebar-toggle-icon" id="sidebarCollapse">
                            sidebar toggle<span></span>
                        </div><!--/.sidebar toggle icon-->
                        <div class="d-flex flex-grow-1">
                            <ul class="navbar-nav flex-row align-items-center ml-auto">
                                <li class="nav-item dropdown quick-actions">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-th-large-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="nav-grid-row row">
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-cog-outline d-block"></i>
                                                <span>Settings</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-group-outline d-block"></i>
                                                <span>Users</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-puzzle-outline d-block"></i>
                                                <span>Components</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-chart-bar-outline d-block"></i>
                                                <span>Profits</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-time d-block"></i>
                                                <span>New Event</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-edit d-block"></i>
                                                <span>Tasks</span>
                                            </a>
                                        </div>
                                    </div>
                                </li><!--/.dropdown-->
                                <li class="nav-item">
                                    <a class="nav-link" href="chat.html"><i class="typcn typcn-messages"></i></a>
                                </li>
                                <li class="nav-item dropdown notification">
                                    <a class="nav-link dropdown-toggle badge-dot" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-bell"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <h6 class="notification-title">Notifications</h6>
                                        <p class="notification-text">You have 2 unread notification</p>
                                        <div class="notification-list">
                                            <div class="media new">
                                                <div class="img-user"><img src="assets/dist/img/avatar.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</h6>
                                                    <span>Mar 15 12:32pm</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media new">
                                                <div class="img-user online"><img src="assets/dist/img/avatar2.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Joyce Chua</strong> just created a new blog post</h6>
                                                    <span>Mar 13 04:16am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar3.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Althea Cabardo</strong> just created a new blog post</h6>
                                                    <span>Mar 13 02:56am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar4.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Adrian Monino</strong> added new comment on your photo</h6>
                                                    <span>Mar 12 10:40pm</span>
                                                </div>
                                            </div><!--/.media -->
                                        </div><!--/.notification -->
                                        <div class="dropdown-footer"><a href="">View All Notifications</a></div>
                                    </div><!--/.dropdown-menu -->
                                </li><!--/.dropdown-->
                                <li class="nav-item dropdown user-menu">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <!--<img src="assets/dist/img/user2-160x160.png" alt="">-->
                                        <i class="typcn typcn-user-add-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="dropdown-header d-sm-none">
                                            <a href="" class="header-arrow"><i class="icon ion-md-arrow-back"></i></a>
                                        </div>
                                        <div class="user-header">
                                            <div class="img-user">
                                                <img src="assets/dist/img/avatar-1.jpg" alt="">
                                            </div><!-- img-user -->
                                            <h6>Naeem Khan</h6>
                                            <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89d80999588949db89f95999194d69b9795">[email&#160;protected]</a></span>
                                        </div><!-- user-header -->
                                        <a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-arrow-shuffle"></i> Activity Logs</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
                                        <a href="register.html" class="dropdown-item"><i class="typcn typcn-key-outline"></i> Sign Out</a>
                                    </div><!--/.dropdown-menu -->
                                </li>
                            </ul><!--/.navbar nav-->
                            <div class="nav-clock">
                                <div class="time">
                                    <span class="time-hours"></span>
                                    <span class="time-min"></span>
                                    <span class="time-sec"></span>
                                </div>
                            </div><!-- nav-clock -->
                        </div>
                    </nav><!--/.navbar-->
                    <!--Content Header (Page header)-->
                    <div class="content-header row align-items-center m-0">
                        <nav aria-label="breadcrumb" class="col-sm-4 order-sm-last mb-3 mb-sm-0 p-0 ">
                            <ol class="breadcrumb d-inline-flex font-weight-600 fs-13 bg-white mb-0 float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Forms</a></li>
                                <li class="breadcrumb-item active">Basic Forms</li>
                            </ol>
                        </nav>
                        <div class="col-sm-8 header-title p-0">
                            <div class="media">
                                <div class="header-icon text-success mr-3"><i class="typcn typcn-puzzle-outline"></i></div>
                                <div class="media-body">
                                    <h1 class="font-weight-bold">Basic Forms</h1>
                                    <small>Tabs styles and versions</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.Content Header (Page header)--> 
                    <div class="body-content">
                        <div class="row">
                            <div class="col-md-12 col-lg-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Overview</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1" class="font-weight-600">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1" class="font-weight-600">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                            </div>
                                            <div class="form-group form-check">
                                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                            </div>
                                            <button type="submit" class="btn btn-success">Submit</button>
                                        </form>
                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Form controls</h5>
                                        <p>Textual form controls—like <code>&lt;input&gt;</code>s, <code>&lt;select&gt;</code>s, and <code>&lt;textarea&gt;</code>s—are styled with the <code>.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
                                        <p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code>&lt;select&gt;</code>s.</p>

                                        <form>
                                            <div class="form-group">
                                                <label for="exampleFormControlInput1" class="font-weight-600">Email address</label>
                                                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleFormControlSelect1" class="font-weight-600">Example select</label>
                                                <select class="form-control" id="exampleFormControlSelect1">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleFormControlSelect2" class="font-weight-600">Example multiple select</label>
                                                <select multiple class="form-control" id="exampleFormControlSelect2">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleFormControlTextarea1" class="font-weight-600">Example textarea</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                            </div>
                                        </form>
                                        <p>For file inputs, swap the <code>.form-control</code> for <code>.form-control-file</code>.</p>
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleFormControlFile1">Example file input</label>
                                                <input type="file" class="form-control-file" id="exampleFormControlFile1">
                                            </div>
                                        </form>
                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Sizing</h5>
                                        <p>Set heights using classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>
                                        <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
                                        <input class="form-control mt-2" type="text" placeholder="Default input">
                                        <input class="form-control form-control-sm mt-2" type="text" placeholder=".form-control-sm">

                                        <select class="form-control form-control-lg mt-2">
                                            <option>Large select</option>
                                        </select>
                                        <select class="form-control mt-2">
                                            <option>Default select</option>
                                        </select>
                                        <select class="form-control form-control-sm mt-2">
                                            <option>Small select</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Sizing Readonly</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">


                                        <p>Add the <code>readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
                                        <input class="form-control" type="text" placeholder="Readonly input here..." readonly>

                                    </div>
                                </div>


                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Readonly plain text</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled as plain text, use the <code>.form-control-plaintext</code> class to remove the default form field styling and preserve the correct margin and padding.</p>
                                        <form>
                                            <div class="form-group row">
                                                <label for="staticEmail" class="col-sm-3 col-form-label font-weight-600">Email</label>
                                                <div class="col-sm-9">
                                                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="inputPassword" class="col-sm-3 col-form-label font-weight-600">Password</label>
                                                <div class="col-sm-9">
                                                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Textual inputs</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>Here are examples of <code>.form-control</code> applied to each textual HTML5 <code>&lt;input&gt;</code> <code>type</code>.</p>
                                        <div class="form-group row">
                                            <label for="example-text-input" class="col-sm-3 col-form-label font-weight-600">Text</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-search-input" class="col-sm-3 col-form-label font-weight-600">Search</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-email-input" class="col-sm-3 col-form-label font-weight-600">Email</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-url-input" class="col-sm-3 col-form-label font-weight-600">URL</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-tel-input" class="col-sm-3 col-form-label font-weight-600">Telephone</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-password-input" class="col-sm-3 col-form-label font-weight-600">Password</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="password" value="hunter2" id="example-password-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-number-input" class="col-sm-3 col-form-label font-weight-600">Number</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="number" value="42" id="example-number-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-datetime-local-input" class="col-sm-3 col-form-label font-weight-600">Date and time</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-date-input" class="col-sm-3 col-form-label font-weight-600">Date</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-month-input" class="col-sm-3 col-form-label font-weight-600">Month</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="month" value="2011-08" id="example-month-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-week-input" class="col-sm-3 col-form-label font-weight-600">Week</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="week" value="2011-W33" id="example-week-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-time-input" class="col-sm-3 col-form-label font-weight-600">Time</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="time" value="13:45:00" id="example-time-input">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="example-color-input" class="col-sm-3 col-form-label font-weight-600">Color</label>
                                            <div class="col-sm-9">
                                                <input class="form-control" type="color" value="#37a000" id="example-color-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-100"></div>
                            <div class="col-md-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Inline form </h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>Use the <code>.form-inline</code> class to display a series of labels, form controls, 
                                            and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.</p>
                                        <form class="form-inline">
                                            <label class="sr-only" for="inlineFormInputName2">Name</label>
                                            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

                                            <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
                                            <div class="input-group mb-2 mr-sm-2">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">@</div>
                                                </div>
                                                <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
                                            </div>
                                            <div class="form-check mb-2 mr-sm-2">
                                                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                                                <label class="form-check-label" for="inlineFormCheck">
                                                    Remember me
                                                </label>
                                            </div>
                                            <button type="submit" class="btn btn-success mb-2">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="w-100"></div>   
                            <div class="col-md-12 col-lg-5">
                                <!--Checkboxes-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Checkboxes</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                                            <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
                                        </div>
                                        <p class="mt-3">Custom checkboxes can also utilize the <code>:indeterminate</code> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).</p>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck2"/>
                                            <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Radios-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Radios</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Inline-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Inline</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadioInline1">Inline radio</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadioInline2">Other inline radio</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Disabled-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Disabled</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>Custom checkboxes and radios can also be disabled. Add the <code>disabled</code> boolean attribute to the <code>&lt;input&gt;</code> and the custom indicator and label description will be automatically styled.</p>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
                                            <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
                                            <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Switches-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Switches</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>A switch has the markup of a custom checkbox but uses the <code>.custom-switch</code> class to render a toggle
                                            switch. Switches also support the <code>disabled</code> attribute.</p>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="customSwitch1">
                                            <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
                                        </div>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
                                            <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Range-->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Range</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>Create custom <code>&lt;input type="range"&gt;</code> controls with <code>.custom-range</code>. The track 
                                            (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and 
                                            Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate
                                            progress, we do not currently support it.</p>

                                        <label for="customRange1" class="font-weight-600">Example range</label>
                                        <input type="range" class="custom-range" id="customRange1">

                                        <p>Range inputs have implicit values for <code>min</code> and <code>max</code>—<code>0</code> and <code>100</code>, 
                                            respectively. You may specify new values for those using the <code>min</code> and <code>max</code> attributes.</p>

                                        <label for="customRange2" class="font-weight-600">Example range</label>
                                        <input type="range" class="custom-range" min="0" max="5" id="customRange2">

                                        <p>By default, range inputs “snap” to integer values. To change this, you can specify a <code>step</code> value. 
                                            In the example below, we double the number of steps by using <code>step="0.5"</code>.</p>

                                        <label for="customRange3" class="font-weight-600">Example range</label>
                                        <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
                                    </div>
                                </div>
                                <!--Checkboxes & Radios-->
                                <div class="card mb-4 mb-lg-0">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Checkboxes & Radios</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h4>Checkboxes</h4>
                                        <form>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <fieldset>
                                                        <legend class="fs-16 font-weight-600"> Basic </legend>
                                                        <p>Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc. </p>
                                                        <div class="checkbox">
                                                            <input id="checkbox1" type="checkbox">
                                                            <label for="checkbox1">Default</label>
                                                        </div>
                                                        <div class="checkbox checkbox-primary">
                                                            <input id="checkbox2" type="checkbox" checked="">
                                                            <label for="checkbox2">Primary</label>
                                                        </div>
                                                        <div class="checkbox checkbox-success">
                                                            <input id="checkbox3" type="checkbox">
                                                            <label for="checkbox3">Success</label>
                                                        </div>
                                                        <div class="checkbox checkbox-info">
                                                            <input id="checkbox4" type="checkbox">
                                                            <label for="checkbox4">Info</label>
                                                        </div>
                                                        <div class="checkbox checkbox-warning">
                                                            <input id="checkbox5" type="checkbox" checked="">
                                                            <label for="checkbox5">Warning</label>
                                                        </div>
                                                        <div class="checkbox checkbox-danger">
                                                            <input id="checkbox6" type="checkbox" checked="">
                                                            <label for="checkbox6">Check me out</label>
                                                        </div>
                                                        <p>Inline checkboxes</p>
                                                        <div class="checkbox checkbox-inline">
                                                            <input type="checkbox" id="inlineCheckbox1" value="option1">
                                                            <label for="inlineCheckbox1"> Inline One </label>
                                                        </div>
                                                        <div class="checkbox checkbox-success checkbox-inline">
                                                            <input type="checkbox" id="inlineCheckbox2" value="option1" checked="">
                                                            <label for="inlineCheckbox2"> Inline Two </label>
                                                        </div>
                                                        <div class="checkbox checkbox-inline">
                                                            <input type="checkbox" id="inlineCheckbox3" value="option1">
                                                            <label for="inlineCheckbox3"> Inline Three </label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-4">
                                                    <fieldset>
                                                        <legend class="fs-16 font-weight-600">Circled</legend>
                                                        <p><code>.checkbox-circle</code> for roundness.</p>
                                                        <div class="checkbox checkbox-circle">
                                                            <input id="checkbox7" type="checkbox">
                                                            <label for="checkbox7">Simply Rounded</label>
                                                        </div>
                                                        <div class="checkbox checkbox-info checkbox-circle">
                                                            <input id="checkbox8" type="checkbox" checked="">
                                                            <label for="checkbox8">Me too</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-4">
                                                    <fieldset>
                                                        <legend class="fs-16 font-weight-600">Disabled</legend>
                                                        <p>Disabled state also supported.</p>
                                                        <div class="checkbox">
                                                            <input id="checkbox9" type="checkbox" disabled="">
                                                            <label for="checkbox9">Can't check this</label>
                                                        </div>
                                                        <div class="checkbox checkbox-success">
                                                            <input id="checkbox10" type="checkbox" disabled="" checked="">
                                                            <label for="checkbox10">This too</label>
                                                        </div>
                                                        <div class="checkbox checkbox-warning checkbox-circle">
                                                            <input id="checkbox11" type="checkbox" disabled="" checked="">
                                                            <label for="checkbox11">And this</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                            </div>
                                        </form>
                                        <h4>Radios</h4>
                                        <form>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <fieldset>
                                                        <legend class="fs-16 font-weight-600">Basic</legend>
                                                        <p>Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc. </p>
                                                        <div class="row">
                                                            <div class="col-sm-6">
                                                                <div class="radio">
                                                                    <input type="radio" name="radio1" id="radio1" value="option1" checked="">
                                                                    <label for="radio1">Small</label>
                                                                </div>
                                                                <div class="radio">
                                                                    <input type="radio" name="radio1" id="radio2" value="option2">
                                                                    <label for="radio2">Big</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="radio radio-danger">
                                                                    <input type="radio" name="radio2" id="radio3" value="option1">
                                                                    <label for="radio3">Next</label>
                                                                </div>
                                                                <div class="radio radio-danger">
                                                                    <input type="radio" name="radio2" id="radio4" value="option2" checked="">
                                                                    <label for="radio4">One</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <p>Inline radios</p>
                                                        <div class="radio radio-info radio-inline">
                                                            <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
                                                            <label for="inlineRadio1"> Inline One </label>
                                                        </div>
                                                        <div class="radio radio-inline">
                                                            <input type="radio" id="inlineRadio2" value="option1" name="radioInline">
                                                            <label for="inlineRadio2"> Inline Two </label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-4">
                                                    <fieldset>
                                                        <legend class="fs-16 font-weight-600">Disabled</legend>
                                                        <p>Disabled state also supported.</p>
                                                        <div class="radio radio-danger">
                                                            <input type="radio" name="radio3" id="radio5" value="option1" disabled="">
                                                            <label for="radio5">Next</label>
                                                        </div>
                                                        <div class="radio">
                                                            <input type="radio" name="radio3" id="radio6" value="option2" checked="" disabled="">
                                                            <label for="radio6"> One</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-7">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">Custom styles</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p>For custom Bootstrap form validation messages, you’ll need to add the <code>novalidate</code> boolean attribute
                                            to your <code>&lt;form&gt;</code>. This disables the browser default feedback tooltips, but still provides 
                                            access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept
                                            the submit button and relay feedback to you. When attempting to submit, you’ll see the <code>:invalid</code> and
                                            <code>:valid</code> styles applied to your form controls.</p>
                                        <p>Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate
                                            feedback. Background icons for <code>&lt;select&gt;</code>s are only available with <code>.custom-select</code>, and not <code>.form-control</code>.</p>
                                        <form class="needs-validation" novalidate>
                                            <div class="form-row">
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationCustom01" class="font-weight-600">First name</label>
                                                    <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
                                                    <div class="valid-feedback">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationCustom02" class="font-weight-600">Last name</label>
                                                    <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
                                                    <div class="valid-feedback">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationCustomUsername" class="font-weight-600">Username</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="inputGroupPrepend">@</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
                                                        <div class="invalid-feedback">
                                                            Please choose a username.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="validationCustom03" class="font-weight-600">City</label>
                                                    <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                                                    <div class="invalid-feedback">
                                                        Please provide a valid city.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationCustom04" class="font-weight-600">State</label>
                                                    <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                                                    <div class="invalid-feedback">
                                                        Please provide a valid state.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationCustom05" class="font-weight-600">Zip</label>
                                                    <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                                                    <div class="invalid-feedback">
                                                        Please provide a valid zip.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                                                    <label class="form-check-label" for="invalidCheck">
                                                        Agree to terms and conditions
                                                    </label>
                                                    <div class="invalid-feedback">
                                                        You must agree before submitting.
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-success" type="submit">Submit form</button>
                                        </form>
                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Browser defaults</h5>
                                        <p>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.</p>
                                        <p>While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.</p>
                                        <form>
                                            <div class="form-row">
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationDefault01">First name</label>
                                                    <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationDefault02">Last name</label>
                                                    <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationDefaultUsername">Username</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="inputGroupPrepend2">@</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="validationDefault03">City</label>
                                                    <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationDefault04">State</label>
                                                    <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationDefault05">Zip</label>
                                                    <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
                                                    <label class="form-check-label" for="invalidCheck2">
                                                        Agree to terms and conditions
                                                    </label>
                                                </div>
                                            </div>
                                            <button class="btn btn-success" type="submit">Submit form</button>
                                        </form>
                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Server side</h5>
                                        <p class="mb-4">We recommend using client-side validation, but in case you require server-side validation, you can indicate 
                                            invalid and valid form fields with <code>.is-invalid</code> and <code>.is-valid</code>. Note that <code>.invalid-feedback</code> is also
                                            supported with these classes.</p>
                                        <form>
                                            <div class="form-row">
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationServer01" class="font-weight-600">First name</label>
                                                    <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required="">
                                                    <div class="valid-feedback">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationServer02" class="font-weight-600">Last name</label>
                                                    <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required="">
                                                    <div class="valid-feedback">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationServerUsername" class="font-weight-600">Username</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="inputGroupPrepend3">@</span>
                                                        </div>
                                                        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required="">
                                                        <div class="invalid-feedback">
                                                            Please choose a username.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="validationServer03" class="font-weight-600">City</label>
                                                    <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required="">
                                                    <div class="invalid-feedback">
                                                        Please provide a valid city.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationServer04" class="font-weight-600">State</label>
                                                    <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required="">
                                                    <div class="invalid-feedback">
                                                        Please provide a valid state.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationServer05" class="font-weight-600">Zip</label>
                                                    <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required="">
                                                    <div class="invalid-feedback">
                                                        Please provide a valid zip.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="">
                                                    <label class="form-check-label" for="invalidCheck3">
                                                        Agree to terms and conditions
                                                    </label>
                                                    <div class="invalid-feedback">
                                                        You must agree before submitting.
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-success" type="submit">Submit form</button>
                                        </form>
                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Supported elements</h5>
                                        <p>Validation styles are available for the following form controls and components:</p>
                                        <ul>
                                            <li><code>&lt;input&gt;</code>s and <code>&lt;textarea&gt;</code>s with <code>.form-control</code> (including up to one <code>.form-control</code> in input groups)</li>
                                            <li><code>&lt;select&gt;</code>s with <code>.form-select</code> or <code>.custom-select</code></li>
                                            <li><code>.form-check</code>s</li>
                                            <li><code>.custom-checkbox</code>s and <code>.custom-radio</code>s</li>
                                            <li><code>.custom-file</code></li>
                                        </ul>
                                        <form class="was-validated">
                                            <div class="mb-3">
                                                <label for="validationTextarea">Textarea</label>
                                                <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
                                                <div class="invalid-feedback">
                                                    Please enter a message in the textarea.
                                                </div>
                                            </div>

                                            <div class="custom-control custom-checkbox mb-3">
                                                <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
                                                <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
                                                <div class="invalid-feedback">Example invalid feedback text</div>
                                            </div>

                                            <div class="custom-control custom-radio">
                                                <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
                                                <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-3">
                                                <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
                                                <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
                                                <div class="invalid-feedback">More example invalid feedback text</div>
                                            </div>

                                            <div class="form-group">
                                                <select class="custom-select" required>
                                                    <option value="">Open this select menu</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                                <div class="invalid-feedback">Example invalid custom select feedback</div>
                                            </div>

                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="validatedCustomFile" required>
                                                <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
                                                <div class="invalid-feedback">Example invalid custom file feedback</div>
                                            </div>
                                        </form>


                                        <hr class="my-4">
                                        <h5 class="font-weight-600">Tooltips</h5>
                                        <p>If your form layout allows it, you can swap the <code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code>position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>


                                        <form class="needs-validation" novalidate>
                                            <div class="form-row">
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationTooltip01" class="font-weight-600">First name</label>
                                                    <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
                                                    <div class="valid-tooltip">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationTooltip02" class="font-weight-600">Last name</label>
                                                    <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
                                                    <div class="valid-tooltip">
                                                        Looks good!
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <label for="validationTooltipUsername" class="font-weight-600">Username</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
                                                        </div>
                                                        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
                                                        <div class="invalid-tooltip">
                                                            Please choose a unique and valid username.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="validationTooltip03" class="font-weight-600">City</label>
                                                    <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
                                                    <div class="invalid-tooltip">
                                                        Please provide a valid city.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationTooltip04" class="font-weight-600">State</label>
                                                    <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
                                                    <div class="invalid-tooltip">
                                                        Please provide a valid state.
                                                    </div>
                                                </div>
                                                <div class="col-md-3 mb-3">
                                                    <label for="validationTooltip05" class="font-weight-600">Zip</label>
                                                    <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
                                                    <div class="invalid-tooltip">
                                                        Please provide a valid zip.
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-success" type="submit">Submit form</button>
                                        </form>
                                    </div>
                                </div>
                                <!--File browser-->
                                <div class="card">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="fs-17 font-weight-600 mb-0">File browser</h6>
                                            </div>
                                            <div class="text-right">
                                                <div class="actions">
                                                    <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                                    <div class="dropdown action-item" data-toggle="dropdown">
                                                        <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a href="#" class="dropdown-item">Refresh</a>
                                                            <a href="#" class="dropdown-item">Manage Widgets</a>
                                                            <a href="#" class="dropdown-item">Settings</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div>
                                            <input type="file" name="file-1[]" id="file-1" class="custom-input-file" data-multiple-caption="{count} files selected" multiple />
                                            <label for="file-1">
                                                <i class="fa fa-upload"></i>
                                                <span>Choose a file…</span>
                                            </label>
                                        </div>
                                        <div class="mt-3">
                                            <input type="file" name="file-2[]" id="file-2" class="custom-input-file custom-input-file--2" data-multiple-caption="{count} files selected" multiple />
                                            <label for="file-2">
                                                <i class="fa fa-upload"></i>
                                                <span>Choose a file…</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>   
                        </div>
                    </div><!--/.body content-->
                </div><!--/.main content-->
                <footer class="footer-content">
                    <div class="footer-text d-flex align-items-center justify-content-between">
                        <div class="copy">© 2018 Bdtask Responsive Bootstrap 4 Dashboard Template</div>
                        <div class="credit">Designed by: <a href="http://www.bootstrapmb.com/">Bdtask</a></div>
                    </div>
                </footer><!--/.footer content-->
                <div class="overlay"></div>
            </div><!--/.wrapper-->
        </div>
        <!--Global script(used by all pages)-->
        <script src="assets/plugins/jQuery/jquery-3.4.1.min.js"></script>
        <script src="assets/dist/js/popper.min.js"></script>
        <script src="http://cdn.bootstrapmb.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="assets/plugins/metisMenu/metisMenu.min.js"></script>
        <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
        <!-- Third Party Scripts(used by this page)-->

        <!--Page Active Scripts(used by this page)-->
        <script src="assets/dist/js/pages/forms-basic.active.js"></script>
        <!--Page Scripts(used by all page)-->
        <script src="assets/dist/js/sidebar.js"></script>
    </body>
</html>